<template>
  <div class="tem-table">
    <div class="menu-box">
      <el-menu :default-active="menuIndex" class="tab-list" :ellipsis="false" mode="horizontal"
               @select="(i)=>menuIndex=i">
        <el-menu-item class="tab-item" :index="0">应用菜单</el-menu-item>
        <el-menu-item class="tab-item" :index="1">权限标识符</el-menu-item>
        <el-menu-item class="tab-item" :index="2">应用角色</el-menu-item>
        <el-menu-item class="tab-item" :index="3">应用成员</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <div style="width: 100%;height: 100%" v-if="menuIndex===0">
        <AppMenuView :app-id="appId"/>
      </div>
      <div style="width: 100%;height: 100%" v-else-if="menuIndex===1">
        <AppPermStrView :app-id="appId"/>
      </div>
      <div style="width: 100%;height: 100%" v-else-if="menuIndex===2">
        <AppRoleView :app-id="appId"/>
      </div>
      <div style="width: 100%;height: 100%" v-else-if="menuIndex===3">
        <AppUserView :app-id="appId"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount} from "vue";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import AppRoleView from "@/views/AdminViews/AppRoleView.vue";
import AppUserView from "@/views/AdminViews/AppUserView.vue";
import AppMenuView from "@/views/AdminViews/AppMenuView.vue";
import AppPermStrView from "@/views/AdminViews/AppPermStrView.vue";
const appId = ref('')
const menuIndex = ref(0)
onBeforeMount(()=>{
  const route = useRoute()
  if (!route.query.appId) {
    ElMessage.error('无效应用ID')
    return
  }
  appId.value = route.query.appId
})


</script>

<style lang="scss" scoped>
.tem-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ap-box-shadow-light);
  box-sizing: border-box;

  .content {
    width: 100%;
    $a: 100%;
    $b: 40px;
    height: calc(#{$a} - #{$b});
    //box-sizing: border-box;
    //padding: 10px;
  }

  .menu-box {
    width: 100%;
    height: 40px;

    .tab-list {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      margin: 0;

      .tab-item {
        width: 33.333%;
        box-sizing: border-box;
      }
    }
  }
}
</style>